<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站配置</title>
    <style>
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .popup-content {
            background: white;
            padding: 20px;
            border-radius: 8px;
            width: 400px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], input[type="url"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .radio-group {
            display: flex;
            gap: 15px;
            margin: 10px 0;
        }
        .hidden {
            display: none;
        }
        .btn-submit {
            background: #1890ff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }


    </style>
</head>
<body>
<div class="popup-overlay">
    <div class="popup-content">
        <h2>网站配置</h2>
        <form id="siteForm" action="/create_website_config" method="POST">
            <div class="form-group">
                <label for="website_name">网站名称</label>
                <input type="text" name="website_name" required>
            </div>
            <div class="form-group">
                <label for="website_name">网站URL</label>
                <input type="url" name="website_url" required>
            </div>
            <div class="form-group">
                <label>网站类型</label>
                <div class="radio-group">
                    <label>
                        <input type="radio" name="website_type" value=0 checked> 通用网站
                    </label>
                    <label>
                        <input type="radio" name="website_type" value=1> 单独适配
                    </label>
                </div>
            </div>
            <div id="uploadSection" class="form-group hidden">
                <label for="configFile">上传配置文件</label>
                <input type="file" id="configFile">
            </div>
            <div class="form-group">
                <label>服务区域</label>
                <div class="radio-group">
                    <label>
                        <input type="radio" name="isforeign" value=0 checked> 境内
                    </label>
                    <label>
                        <input type="radio" name="isforeign" value=1> 境外
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label for="brand">品牌</label>
                <input type="text" name="brand" required>
            </div>
            <div class="form-group">
                <label for="menu">图片分类</label>
                <input type="text" name="menu" required>
            </div>
            <button type="submit" class="btn-submit">提交</button>
            <button type="button" class="btn-cancel" id="cancelBtn">取消</button>
        </form>
    </div>
</div>

<script>
    const cancelBtn = document.getElementById('cancelBtn');
    cancelBtn.addEventListener('click', () => {
        history.back();
    });

        document.addEventListener('DOMContentLoaded', function() {
            const siteTypeRadios = document.querySelectorAll('input[name="website_type"]');
            const uploadSection = document.getElementById('uploadSection');

            siteTypeRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    console.log(this.value)
                    uploadSection.classList.toggle('hidden', this.value !== '1');
                });
            });
        });

    document.getElementById('siteForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      try {
        const response = await fetch(e.target.action, {
          method: 'POST',
          body: formData
        });
        const result = await response.json(); // 解析JSON返回值
        if (result.code == 200){
            alert(result.data);
            window.location.href="/website_list"
        }else{
            alert('提交失败:' + result.data);
        }
      } catch (error) {
        console.error('提交失败:', error);
      }
    });


</script>
</body>
</html>
